<template>
  <div class="side-nav">
    <h2>个人中心</h2>
    <ul @click="handleClick">
      <li
        v-for="v in navData"
        :class="[{ active: active == v.route }]"
        :key="v.id"
        :data-route="v.route"
      >
        <span :class="['iconfont', v.icon]"></span>{{ v.name }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 'user-info',
      navData: [
        {
          id: 1,
          name: '个人资料',
          icon: 'icon-gerenziliao',
          route: 'user-info',
        },
        {
          id: 2,
          name: '我的消息',
          icon: 'icon-wodexiaoxi',
          route: 'user-message',
        },
        {
          id: 3,
          name: '我的收藏',
          icon: 'icon-shoucang',
          route: 'user-collect',
        },
        {
          id: 4,
          name: '我的下载',
          icon: 'icon-xiazai',
          route: 'user-download',
        },
      ],
    }
  },
  mounted() {
    this.active = this.$route.name
  },
  methods: {
    handleClick(e) {
      this.active = e.target.getAttribute('data-route')
      this.$router.push({ name: this.active })
    },
  },
}
</script>
<style scoped lang="scss">
.side-nav {
  border: 1px solid #ddd;
  h2 {
    font-size: 20px;
    color: #fff;
    text-align: center;
    height: 76px;
    line-height: 76px;
    background-color: $mainColor;
    border-bottom: 3px solid #f0bc1d;
  }
  ul {
    li {
      font-size: 16px;
      width: 100%;
      text-align: center;
      height: 60px;
      line-height: 60px;
      color: #333;
      cursor: pointer;
      border-bottom: 1px solid #eee;
      &:hover,
      &.active {
        background-color: #f8f2f2;
      }
      span {
        color: #666;
        font-size: 20px;
        margin-right: 8px;
        &.icon-gerenziliao {
          color: #de422e;
        }
        &.icon-wodexiaoxi {
          color: #2ab150;
        }
        &.icon-shoucang {
          color: #ed9420;
        }
        &.icon-xiazai {
          color: #1d80dc;
        }
        &.icon-xuexiku {
          color: #d42619;
        }
        &.icon-bianjisekuai {
          color: #1450ca;
        }
        &.icon-shujukanban {
          color: #f40;
        }
      }
    }
  }
}
</style>